<template>

    <div id="Search">

        <div class="so">

            <i class="fa fa-search"></i>

            <input type="text" v-model="keyword" />

        </div>

        <div class="lei">

            <p>电影/电视剧/综艺</p >

        </div>

        <div class="dian">

            <ul>

                

            

            <li v-for="item in newse" :key="item.id">

                <div class="first">

                    < img :src="item.img" alt="">

                </div>

                <div class="second">

                    <p class="title">{{item.title}}</p >

                    <p class="types font-color">{{item.types}}</p >

                    <p class="font-color">{{item.time}}</p >

                </div>

                <div class="third">

                    <p>{{item.fen}}</p >

                </div>

            </li>

            </ul>

        </div>

    </div>

</template>


<script>

    export default{

        data(){

            return{

                keyword:"",

                newsearch:[]

                

            }},

        methods: {

            getsearchData() {

                var that = this;

                axios.get('/mock/newsearch.json')

                    .then(function(response) {

                        console.log(response);

                        if(response.status == 200){

                            if(response.data && response.data.newsearch){

                                that.newsearch = response.data.newsearch;

                            }

                        }

                    })

                    .catch(function(error) {

                        console.log(error);

                    });

            }

        },

        created() {

            this.getsearchData();

        },

        computed:{

            "newse"(){

                if(this.keyword==""){

                    return this.newsearch;

                }else{

                    return this.newsearch.filter(item=>{

                        return !item.title.indexOf(this.keyword)

                    })

                }

            }

        }

            

        

    }

</script>


<style scoped>

    #Search{

        width: 100%;

        padding-bottom: 50px;

    }

    img{

        width: 80px;

    }

    .so{

        height: 50px;

        background: whitesmoke;

        border-bottom: 1px solid #ccc;

    }

    input{

        width: 90%;

        height: 60%;

        margin: 7px;

    }

    .lei{

        height: 30px;

        font-size: 18px;

        color: #999;

        font-weight: bold;

        border-bottom: 1px solid #ccc;

    }

    .lei p{

        margin: 8px;

    }

    .dian div{

        float: left;

    }

    .first{

        width: 25%;

        margin-bottom: 8px;

    }

    .second{

        width: 58%;

    }

    .types{

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }

    .third{

        width: 15%;

        margin-top: 5px;

    }

    li{

        overflow: hidden;

        margin: 10px;

        border-bottom: 1px dotted #ccc;

    }

    .title{

        font-size: 18px;

        font-weight: bold;

    }

    p{

        line-height: 25px;

    }

    .font-color{

        color: #666;

    }

    .score{

        color: #F90;

        margin-left: 5px;

        font-weight: bold;

    }

    .third p{

        color: coral

        

    }

</style>